<template>
    <div>
        <div
            style="position: relative;  width: 100%; height: 70%; display: flex; justify-content: center;flex-wrap: wrap; overflow-x: hidden; align-items: center;">
            <div style="width: 100%; height:30rem; overflow: hidden;" class="imageContainer">
                <img src="@/assets/img/3.png" alt="" style="width: 100%; height: 100%; object-fit:cover;">
            </div>
            <div style="margin-top: 0; position: absolute; text-shadow: 2px 2px 10px #000; z-index: 1;">
                <h1
                    style="font-size: 2rem; color: #fff; font-weight: 500; padding: 0;border: 0;margin: 0;width: 100%; font-family:Ubuntu-Bt ;">
                    留言板</h1>
            </div>
        </div>
        <div class="main-inner site-content archives">
            <div class="poem-wrap">
                <div class="poem-border poem-left"></div>
                <div class="poem-border poem-right"></div>
                <h1>一句话</h1>
                <p id="poem"><ruby id="poem">おとといは兎を見たの，<rt>前天看到了小兔，</rt>昨日は鹿，<rt>昨天是小鹿</rt>今日は…あなた<rt>今天是你</rt></ruby>
                </p>
                <p id="info">Robert Franklin Young ·《蒲公英女孩》</p>
            </div>
           <!--  <div style="width: 100%; display: flex; flex-direction: column; gap: 1em;">
                <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 8 }" style="width: 100%;  margin-top: 40px;"
                    v-model="comment.content" placeholder="留下足迹吧~">
                </el-input>
                <div
                    style="display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 1em; align-items: center;">
                    <el-input v-model="name" placeholder="昵称" prefix-icon="el-icon-user"></el-input>
                    <el-input v-model="email" placeholder="邮件(选填)"></el-input>
                    <span style="display: flex; align-items: center;margin-left: auto; ">
                        <el-button circle="" @click.self="emoji = !emoji">
                            <i class="el-icon-user" @click.self="emoji = !emoji"></i>
                        </el-button>

                        <el-button type="primary" style="width: 70px;" @click="subComment">提交
                        </el-button>

                    </span>
                </div>
                <div style="position: relative;">
                    <picker
                        style=" position: absolute; overflow: visible !important; top: 0em; right: 0px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0.5em 1em;border-radius: 0.875em;overflow: hidden;animation: 0.3s ease 0s 1 normal both running fadeInUp;"
                        :showSearch="false" :showPreview="false" @select="addEmoji" v-show="emoji" />
                </div>


            </div> -->

            <div style="width: 100%; height: auto; ">
                        <formView @load="handleLoad"></formView>
                        <div style="width: 100%; display: flex; justify-content: center; ">
                            <div style="width: 90%; margin: 30px 0 0px 0; height: auto;  ">
                                <div
                                    style="font-size: 0.875em; margin: 0.875em 0px; font-weight: 500; font-family:Ubuntu-Bt ;">
                                    <span>{{ total }}</span> 条评论</div>
                                <commentVue  :commentList="commentList"  @load="handleLoad"></commentVue>
                            </div>
                        </div>
                    </div>
        </div>



    </div>
</template>

<script>
    import commentVue from '@/components/commentVue.vue';
/* import { Picker } from "emoji-mart-vue"; //引入组件 */
import formView from '@/components/formView.vue';

export default {

   
components:{
 commentVue,
/*  Picker, */
 formView,
},
    data() {
        return {
            total:'',
            commentList:[],
            comment:{content:''},
            name:'',
            email:'',
            user:JSON.parse(localStorage.getItem('user' || '{}')),
            emoji:false,
        }
    },
    created(){
        this.load()
    },
    methods:{
        addEmoji(e){
            this.comment.content+=e.native
        },
        handleLoad(){
            this.load()
        },
        load(){
            this.$request.get('/message').then(res=>{
                this.commentList=res.data
            })
            this.$request.get('/message/total').then(res=>{
                this.total=res.data
            })
        },
        subComment(){
                this.comment.name=this.name
                if(this.user!=null){
                    this.comment.image = this.user.image
                    this.comment.name = this.user.name
                }
            this.$request.post("message/add",this.comment).then(res=>{
                if(res.code=='1'){
                    this.$message.success("发送成功")
                    this.load()
                }
                else
                this.$message.error(res.msg);
                
            })
        },
    }
}
</script>

<style scoped>
.poem-wrap {
    position: relative;
    width: 730px;
    max-width: 80%;
    border: 2px solid #797979;
    border-top: none;
    text-align: center;
    margin: 80px auto;
}
.poem-left {
    left: 0;
}
.poem-border {
    position: absolute;
    height: 2px;
    width: 27%;
    background-color: #797979;
}
.poem-right {
    right: 0;
}
.poem-wrap h1 {
    position: relative;
    margin-top: -20px;
    display: inline-block;
    letter-spacing: 4px;
    color: #797979;
}
.poem-wrap p#poem {
    font-size: 25px;
}

.poem-wrap p {
    width: 70%;
    margin: auto;
    line-height: 30px;
    color: #797979;
}
.poem-wrap p#info {
    font-size: 15px;
    margin: 15px auto;
}
.entry-content:before, .entry-content:after {
    content: "";
    display: table;
    table-layout: fixed;
}
.entry-content:after {
    clear: both;
}
.main-inner {
    position: relative;
    z-index: 1;
}
.site-content {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fffc;

    padding: 0 10px;
}
.comment {
    margin-top: 1em;
    position: relative;
    z-index: 1;
}
</style>